<template>
  <div>
    <ul>
      <!-- 
        想让谁重复生成就给谁加 v-for
         v-for="(item,index) in 数组" :key="index"
         item 表示数组循环后的每一条数据
         index 表示数据的下标

         key的作用：
            key表示的是唯一，不加key会报警告，作用是更高效的更新虚拟dom，
            目的是让vue区分它们，有利于代码优化，减少资源消耗
      -->
      <li v-for="(item,index) in data" :key="index">
        {{ item.name }}-----{{ item.age }}-----{{ item.gender }}-----{{ index }}
      </li>
    </ul>
    <table border="1px" cellspacing="0" align="center">
      <thead>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </thead>
      <tr v-for="(item,index) in data" :key="index">
        <td>{{ index }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default{
  data(){
     return{
      data:[
        {
          name:'李唯一',
          age:18,
          gender:'男'
        },
        {
          name:'姜宁',
          age:18,
          gender:'女'
        },
        {
          name:'左丘红婷',
          age:18,
          gender:'女'
        }
      ]
     
     }
  },
  methods:{

  }
}
</script>
<style lang="scss"></style>